<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>请求</title>
	<style>
		header {
			text-align: center;
		}
		.request {
			width: 400px;
			float: left;
		}
		.request > div {
			margin-bottom: 4px;
		}
		.request label {
			display: inline-block;
			width: 55px;
		}
		label.param {
			vertical-align: top;
		}
		.result {
			margin-left: 400px;
		}
		.result iframe {
			width: 99%;
		}
	</style>
</head>
<body>
	<header>
		<h1>请求工具</h1>
	</header>
	<div class="request">
		<div><label for="">url</label><input type="text" name="url" id="url" style="width: 328px; margin-left: 4px;"></div>
		<div><label for="" class="param">params</label> <textarea name="params" cols="44" rows="10"></textarea></div>
		<div><button onclick="getData()">提交</button></div>
	</div>
	<div class="result">
		<iframe src="" name="result" frameborder="0"></iframe>
	</div>
	<script>
	// http://jsonplaceholder.typicode.com/posts/1
	function getData() {
		var url = document.getElementsByName('url')[0];
		var urlvalue = url.value;
		if(urlvalue.trim()) {
			var dom = document.getElementsByName('result')[0];
			dom.src = urlvalue;
		}else {
			url.focus();
		}
	}
	</script>
</body>
</html>